import QtQuick 2.6
import QtQuick.Controls 2.2

  DelayButton {
      id: control
      checked: true
      text: qsTr("Delay\nButton")
      delay: 2000

      contentItem: Text {
          text: control.text
          font: control.font
          opacity: enabled ? 1.0 : 0.3
          color: "white"
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }

      background: Rectangle {
          implicitWidth: 100
          implicitHeight: 100
          opacity: enabled ? 1 : 0.3
          color: control.down ? "#17a81a" : "#21be2b"
          radius: size / 2

          readonly property real size: Math.min(control.width, control.height)
          width: size
          height: size
          anchors.centerIn: parent

          Canvas {
              id: canvas
              anchors.fill: parent

              Connections {
                  target: control
                  onProgressChanged: canvas.requestPaint()
              }

              onPaint: {
                  var ctx = getContext("2d")
                  ctx.clearRect(0, 0, width, height)
                  ctx.strokeStyle = "white"
                  ctx.lineWidth = parent.size / 20
                  ctx.beginPath()
                  var startAngle = Math.PI / 5 * 3
                  var endAngle = startAngle + control.progress * Math.PI / 5 * 9
                  ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
                  ctx.stroke()
              }
          }
      }
  }
